<template>
  <div>
<!--    事件监听v-on-->
    <button v-on:click="num--">-</button>
<!--    v-model 双向绑定-->
    <input type="text" v-model="num">
<!--    v-on事件监听的语法糖@-->
    <button @click="num++">+</button>
    <br>
<!--    使用参数：和下面的方法最好一致避免出差-->
    <button v-on:click="sub(100,$event)">-</button>
    <input type="text" v-model="num">
    <button @click="add">+</button>
    <br>
<!--    v-on事件修饰符号-->
<!--    冒泡事件-->
    <div id="box1" @click="box1()">
      <!--    .capture 添加事件侦听器是，使用事件捕获模式
            优先捕获 点击按钮 结果为：
            box2box2box2box2box2box2box2   优先打印了box2的操作
            anananananananananananananananan
      -->
      <div id="box2" @click.capture="box2()">
        <!--    .self  当事件在该元素本身触发时才触发事件
                  @click.stop.self 链式写法
                  点击box3 结果为
                 box3box3box3box3box3box3box3box3box3box3
         -->
        <div id="box3" @click.stop.self="box3()">
          <!--    .stop  阻止事件冒泡 点击按钮 结果为：
            anananananananananananananananan
          -->
          <button @click.stop="an()">冒泡事件按钮</button>
        </div>
      </div>
    </div>
    <br/>
<!--    .prevent  阻止默认事件
    阻止了默认的跳转行为
-->
    <a href="http://www.baidu.com" @click.prevent="aHref()">点击</a>
    <br/>
<!--    .once 事件只触发一次-->
    <a href="http://www.baidu.com" @click.prevent.once="aHref()">点击第二次会跳转到百度</a>
  </div>
</template>

<script>

export default {
  name: "App",
  data(){
    return{
      num:0
    }
  },
  methods:{
    sub(s,e){
      console.log(s);
      console.log(e);
      return this.num--;
    },
    add(){
      return this.num++;
    },
    box1(){
      console.log('box1box1box1box1box1box1');
    },
    box2(){
      console.log('box2box2box2box2box2box2box2');
    },
    box3(){
      console.log('box3box3box3box3box3box3box3box3box3box3');
    },
    an(){
      console.log('anananananananananananananananan');
    },
    aHref(){
      console.log('阻止了a标签的默认跳转行为');
    }
  }
}
</script>

<style scoped>
  #box1{
    width: 300px;
    height: 300px;
    background: red;
  }
  #box2{
    width: 200px;
    height: 200px;
    background: green;
  }
  #box3{
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>